<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <style>
        button {
            margin-right: 10px;
            padding: 5px 10px;
        }

        p{
            display: none;
        }

        p.active {
            display: block;
        }

        .butColor {
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="head">
            <button @click="showTab(1)" :class="activeTab==1 ?'butColor':''">军事新闻</button>
            <button @click="showTab(2)" :class="activeTab==2 ?'butColor':''">娱乐新闻</button>
            <button @click="showTab(3)" :class="activeTab==3 ?'butColor':''">科技新闻</button>
            <p v-show="activeTab == 1" class="active">韩称朝鲜士兵越过军事分界线 朝方暂未回应</p>
            <p v-show="activeTab == 2" class="active">刘德华起诉“偷拍”者胜诉 获赔2万港币</p>
            <p v-show="activeTab == 3" class="active">华为发布首款鸿蒙平板MatePad Pro</p>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data: {
                activeTab: 1,
            },
            methods: {
                showTab(tabIndex) {
                    this.activeTab = tabIndex
                }
            }
        })
    </script>
</body>
</html>